<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stlesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">

</head>
<body>
<h1>AngularJS TodoList</h1>

<!--搜索框-->
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
              </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 限制长度-->
</div><!-- /.row -->


<!--表格-->
<table class="table">
    <thead>
    <!--表头-->
    <tr>
        <th>#</th>
        <th>Title</th>
        <th>Control</th>
    </tr>
    </thead>

    <tbody>
    {% for row in total_list %}
    <tr>
        <th scope="row">{{row.order}}</th>
        <td id="claa">{{row.content}}</td>
<!--        <td id="newContent" style="display:none">Something is changed...</td>-->
        <td>
            <div class="btn-group" role="group" aria-label="...">
                <script type="text/javascript">
                    function show() {
                        var value = document.getElementById("div1").style.display;
                        if (value == 'none') {
                            document.getElementById("div1").style.display = "block";
                        } else {
                            document.getElementById("div1").style.display = "none";
                        }
                        var y = document.getElementById("clab")
                        if (y === 'Edit'){
                            y.innerHTML = "Save"
                        }else{
                            y.innerHTML = "Edit"
                        }
                    }
                </script>

                <a type="button" class="btn btn-default"
                   href="/changeCondition?order={{row.order}}&condition={{row.condition}}">{{row.condition}}</a>

                <button type="button" class="btn btn-default" id="clab" onclick="show()">Edit</button>
                <div id="div1" style="display:none">
                    <!--输入框-->
                    <input class="form-control" name="" type="text"/>
                </div>

                <a type="button" class="btn btn-default" href="/delete?order={{row.order}}">Remove</a>
            </div>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>


<form class="form-inline" method="post" action="/add">
    <div class="form-group">
        <input type="text" class="form-control" id="content" placeholder="Type something here..." name="content">
    </div>
    <button type="submit" class="btn btn-default">Add New Item</button>
</form>

<br>
<!--按钮-->
<span class="label label-default">All ({{all_num}}）</span>
<span class="label label-success">Done ({{done}})</span>
<span class="label label-warning">Active ({{achieve}})</span>


<script>
    function myFunction() {
        x = document.getElementById("claa");
        x.innerHTML = "Change something";
        y = document.getElementById("clab")
        y.innerHTML = "Save"
    }
</script>
<script src="/static/js/jquery-3.6.3.min.js"></script>
<!--必须放jquery的下面-->
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

</body>
</html>